<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="text" id="chat-text"> <input type="button" value="点击发送" onclick="CHAT.chat()" id="chat-send">

    <div style="background-color: gray" id="msg-show"></div>


    <script>
        var URL = "ws://127.0.0.1:8088/ws";

        var CHAT = {
            socket:null,
            init:function () {
                if(window.WebSocket){

                    CHAT.socket = new WebSocket(URL);//创建webSocket实例对象

                    //对webSocket进行初始化
                    CHAT.socket.onopen = CHAT.wsopen;
                    CHAT.socket.onmessage = CHAT.wsmessage;
                    CHAT.socket.onerror = CHAT.wserror;
                    CHAT.socket.onclose = CHAT.wsclose;


                }else {
                    alert("浏览器不兼容webSocket")
                }
            },
            wsopen:function () {
                console.log('webSocket连接建立成功！');
            },
            wsmessage:function (e) {
                console.log("接收到的参数是：" + e.data);
                var div = document.getElementById("msg-show");
                var html = div.innerHTML;
                div.innerHTML = html + "<br />" + e.data;
            },
            wserror:function () {
                console.log("发生了错误！");
            },
            wsclose:function () {
                console.log("现有连接被关闭");
            },
            chat:function () {//执行消息发送的逻辑
                var text = document.getElementById("chat-text");
                CHAT.socket.send(text.value);
            }
        };

        CHAT.init();//初始化Chat对象

    </script>


<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
<!--<script>-->

<!--    var res;-->

<!--    $.ajax({-->
<!--        type: 'get',-->
<!--        url: '/user/ttt',-->
<!--        data: {-->
<!--            // _method: "post",//注意是  _method，不要忘记下划线-->
<!--            // username: "gumemngsxt",-->
<!--            password: "456"-->
<!--        },-->
<!--        datatype: "JSON",-->
<!--        success: function(data){-->
<!--            console.log(data);-->
<!--            res = data;-->
<!--        },-->
<!--        error: function(data){-->
<!--            console.log("failed");-->
<!--        }-->
<!--    });-->
<!--</script>-->
</body>
</html>